<template>
	<view class="title" v-if="Object.keys(group).length > 0">
		<view class="savearea"></view>
		<view class="user">
			<view class="userpic"  @click="handlerAdmin">
				<img class="nicimg" :src="own.nicPic" mode="aspectFill" alt="用户头像" />
				<text>管家</text>
				<view class="group-admin-menu" v-if="isOwn">
					<view class="menu" @click="task">任务待办列表</view>
					<view class="menu" @click="adminMember">邻里成员管理</view>
					<view class="menu" @click="adminShop">邻里商城管理</view>
					<view class="menu">邻里商圈管理</view>
					<view class="menu" @click="groupInfo">邻里信息管理</view>
				</view>
			</view>
			<view class="name">
				<view class="user-name">
					<text class="value">{{ group.groupName }}</text>
				</view>

				<scroll-view scroll-x="true" class="scroll-nav" @click="handlerToMembers">
					<view class="member" v-for="(item, index) in memberForShow" :key="index">
						<image class="membernic" :src="item.nicPic" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
			<view class="btnarea">
				<view class="btn-item" @click="favorite">
					<image class="img" :src="isFavorite ? '/static/loved.png' : '/static/love.png'" mode="" alt="" />
					<text>{{ isFavorite ? '已收藏' : '未收藏' }}</text>
				</view>
				<view class="icon-box">
					 <view class="more" style="font-size: 50rpx;font-weight: 600;" @click="handleMore">...</view>
					<text>更多</text>
					<view v-if="isMore" class="more_menu">
						<view class="item" @click="delChatRec">清空聊天记录</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const linliObj = uniCloud.importObject('linli-obj',{customUI:true});
import initGlobalData from '../utils/initGlobalData';
import { keytag } from '../utils/shopIcon';
const app = getApp().globalData;
export default {
	name: 'groupNavBar',
	props: {
		members: {
			type: Array,
			required: true
		},

		group: {
			type: Object,
			default: () => {}
		},
		own: {
			type: Object,
			default: () => {}
		}
	},
	computed:{
		memberForShow(){
		return	this.members.filter(item=>!item.isVote)
		}
	},
	data() {
		return {
			isOwn: false,
			targetUser: {
				targetName: '',
				targetId: ''
			},
			isFavorite: false,
				isMore: false,
		};
	},
	mounted() {
		this.isFavorite = this.getFavorite();
		uni.$on('mainPageClickEven', () => (this.isOwn = false));
	},
	methods: {
		handleMore() {
				this.isMore = !this.isMore;
			},
			delChatRec() {
				const _this = this;
				uni.showModal({
					title: '清空聊天记录',
					success(res) {
						if (res.confirm) {
							uni.setStorageSync(`msg_${_this.group.groupId}`, []);
						}
					}
				});
				this.isMore = false;
			},
		getFavorite() {
			if (app.user.favorite?.length > 0) {
				return app.user.favorite.some((item) => item.type === 'group' && item.favorite_id === this.group.groupId);
			} else {
				return false;
			}
		},
		task() {
			uni.navigateTo({
				url: `/own/ownTask/ownTask?groupId=${this.group.groupId}`,
				success: (res) => {},
				fail: () => {},
				complete: () => {}
			});
		},
		adminMember() {
			uni.navigateTo({
				url: `/own/addMember/addMember?groupId=${this.group.groupId}`,
				success(res) {
					console.log(res);
				},
				fail(e) {
					console.log(e);
				}
			});
		},
		regOwn() {
			uni.navigateTo({
				url: '/pages/regOwn/regOwn'
			});
		},
		adminShop() {
			const navType={
				action:'admin',
				groupId:this.group.groupId,
				ownId:this.group.ownId
			}
			const type=encodeURIComponent(JSON.stringify(navType))
			uni.navigateTo({
				url: `/pages/shopping/shopping?type=${type}`
			});
		},
		groupInfo() {
			uni.navigateTo({
				url: '/own/editGroupInfo/editGroupInfo',
				success() {},
				fail(e) {
					console.log(e);
				}
			});
		},
		handlerToMembers() {
			console.log("555",this.members);
			const ids =
				this.memberForShow?.length > 0
					? this.memberForShow.map((item) => ({
							...item,
							keytag: '普通用户'
					  }))
					: [];
          if(ids.length>0){const format = encodeURIComponent(JSON.stringify(ids));
			uni.navigateTo({
				url: `/pages/groupMembers/groupMembers?members=${format}`
			});}else{
				uni.showToast({
					title:'暂无成员信息'
				})
				return
			}
			
		},
		handlerAdmin() {
			console.log('1', app.user.userId, '2', this.own);
			if (app.user.userId && this.own?.userId && app.user.userId === this.own.userId) {
				this.isOwn = !this.isOwn;
			}
		},

		async favorite() {
			// 检查是否已收藏
			if (!this.isFavorite) {
				const location = {
					longitude: this.group.location.coordinates[0],
					latitude: this.group.location.coordinates[1]
				};
				const data = {
					action: 'add',
					userId: app.user.userId,
					favorite_id: this.group.groupId,
					type: 'group',
					name: this.group.groupName,
					location: location
				};
				try {
					const response = await linliObj.favorite(data);
					console.log(response);
					if (response.success) {
						this.isFavorite = true;
						await initGlobalData();
						uni.showToast({
							title: '群收藏成功'
						});
					} else {
						console.log('失败');
						uni.showToast({
							title: '收藏操作失败'
						});
					}
				} catch (error) {
					console.error('收藏请求出错:', error);
					uni.showToast({
						title: '收藏操作失败',
						icon: 'fail'
					});
				}
			} else {
				await new Promise((resolve) => {
					uni.showModal({
						title: '取消收藏',
						content: `您确认要删除${this.group.groupName}群组的收藏吗？`,
						success: (res) => {
							if (res.confirm) {
								const removeData = {
									userId: app.userId,
									action: 'remove',
									favorite_id: this.group.groupId
								};
								(async () => {
									try {
										const removeResponse = await linliObj.favorite(removeData);
										if (removeResponse.success) {
											this.isFavorite = false;
										} else {
											uni.showToast({
												icon: 'fail',
												title: '取消收藏失败'
											});
										}
									} catch (error) {
										console.error('取消收藏请求出错:', error);
										uni.showToast({
											title: '取消收藏失败',
											icon: 'fail'
										});
									}
								})();
							}
							resolve();
						}
					});
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: 750rpx;
	height: 180rpx;
	justify-content: flex-end;
	padding-bottom: 10rpx;
	background-color: rgba(0, 0, 0, 0.3);
}

.savearea {
	width: 750rpx;
	height: 60rpx;
}
.user {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0 50rpx;
	.userpic {
		position: relative;
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
		align-items: center;
		text {
			color: white;
			font-size: 28rpx;
		}
	}
	.group-admin-menu {
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		left: -50rpx;
		top: 120rpx;
		gap: 10rpx;
		width: 280rpx;
		border-radius: 8rpx;
		background-color: #fff;

		/* 阴影优化 */
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12), 0 4rpx 8rpx rgba(0, 0, 0, 0.08);
	}

	/* 显示状态 */
	.group-admin-menu.active {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.menu {
		display: flex;
		width: calc(100% - 20rpx); /* 自适应宽度 */
		height: 60rpx;
		margin: 3rpx 10rpx;
		padding: 0 15rpx;
		align-items: center;
		justify-content: center;
		border-radius: 4rpx;

		box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);

		overflow: hidden;
	}

	/* 伪元素增强顶部光感 */
	.menu::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1rpx;
		background: rgba(255, 255, 255, 0.8);
		pointer-events: none;
	}

	/* 悬停效果 */
	.menu:hover {
		background: linear-gradient(180deg, #fafafa 0%, #f3f3f3 100%);
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.08);
		transform: translateY(-1rpx);
	}

	/* 最后一项取消底部边框 */
	.menu:last-child {
		border-bottom: none;
	}

	.nicimg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}
	.name {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.user-name {
			font-size: 32rpx;
			font-weight: 500;
			color: white;
		}
		.user-id {
			display: flex;
			background-color: #005533;
			width: 400rpx;
		}
	}
}

.member {
	display: inline-block;
	background-color: red;
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
	margin-right: 10rpx;
	margin-top: 5rpx;
}
.membernic {
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
}
.btnarea {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	flex: 1;
	padding-left: 30rpx;
	.btn-item {
		display: flex;
		width: 80rpx;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;
		text {
			font-size: 22rpx;
			color: white;
		}
	}
	.img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
	}
}
.scroll-nav {
	width: 400rpx;
	height: 60rpx;
	margin-top: 15rpx;
	border-radius: 30rpx;
	background-color: #fff;
	overflow-x: auto; /* 确保水平滚动 */
	overflow-y: hidden; /* 隐藏垂直滚动条 */
		/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
	/* #endif */ /* 防止子元素换行 */
}
.icon-box {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
	font-size: 26rpx;
	width: 52rpx;
	color: white;
	align-items: center;
}
.more_menu {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 200rpx;
	height: 100rpx;
	border-radius: 10rpx;
	background-color: #afafaf;
	right: 20rpx;
	top: 200rpx;
	.item {
		display: flex;
		justify-content: center;
		text-align: center;
        font-size:28rpx;
		color: white;
		width: 190rpx;
		height: 45rpx;
		margin: 5rpx;
		:active {
			background-color: #ccc;
		}
	}
}
</style>
